<template>
  <div>
    <div class="header">
      <div class="left">
        <span
          @click="selectTab('recommend')"
          :class="{ active: selectedTab === 'recommend' }"
        >
          推荐
        </span>
        <span
          @click="selectTab('new')"
          :class="{ active: selectedTab === 'new' }"
        >
          新品
        </span>
      </div>
      <div><img src="../assets/logo.dbd40807.png" alt="" /></div>
    </div>
    <div class="content">
      <div v-for="item in articles" :key="item.id" class="article-item">
        <div class="top">
          <div class="left"><img :src="item.avatar" alt="" /></div>
          <div class="right">
            <div class="rightTop">{{ item.stem }}</div>
            <div class="rightBottom">
              <span>{{ item.creator }}</span>
              <span>|</span>
              <span>{{ item.createdAt }}</span>
            </div>
          </div>
        </div>
        <div class="middle">{{ item.content }}</div>
        <div class="bottom">
          <span>点赞 {{ item.likeCount }}</span>
          <span>|</span>
          <span>浏览{{ item.views }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    // 用axios发get请求携带存在vuex中的token数据,打印出数据
    // http://interview-api-t.itheima.net/h5/interview/query

    if (this.user.token) {
      axios
        .get("http://interview-api-t.itheima.net/h5/interview/query", {
          headers: { Authorization: `Bearer ${this.user.token}` },
          params: { current: 1, pageSize: 10 },
        })
        .then((res) => {
          if (res.data.code === 10000) {
            this.articles = res.data.data.rows;
            console.log(this.articles);
          } else {
            this.$toast.fail(res.data.msg);
          }
        })
        .catch((error) => {
          if (error.response && error.response.status === 401) {
            this.$toast.fail("未授权，请重新登录");
            this.$router.push("/login");
          } else {
            console.error("获取文章失败", error);
            this.$toast.fail("获取文章失败，请重试");
          }
        });
    } else {
      this.$toast.fail("请先登录");
      this.$router.push("/login");
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
  },

  name: "XzArticle",
  data() {
    return {
      selectedTab: "recommend", // 默认选中推荐
      articles: [],
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 50px;
  border-bottom: 1px solid #c9c9c9;
  padding: 0 10px;
  .left {
    color: #a7a6a6;
    // 添加相对定位
    span {
      display: inline-block;
      padding: 0 10px;
      position: relative;
      &.active {
        color: black;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -1px; // 调整边框线的位置
          left: 50%;
          transform: translateX(-50%);
          width: 40%; // 设置边框线的宽度
          height: 2px; // 设置边框线的高度
          background-color: black; // 设置边框线的颜色
        }
      }
    }
  }
  div img {
    width: 50px;
    display: block;
    line-height: 50px;
  }
}
.article-item {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
  .top {
    display: flex;
    .left img {
      width: 50px;
      padding: 0 10px 5px 0;
    }
    .right {
      .rightTop {
        font-size: 16px;
        padding: 5px 0;
      }
      .rightBottom {
        font-size: 12px;
        color: #cccccc;
      }
    }
  }
  .middle {
    // 超出两行省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;

    font-size: 15px;
  }
  .bottom {
    padding: 10px 0;
    font-size: 13px;
    color: #cccccc;
  }
}
</style>
